<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "在线支付");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>
<style>
.weui-cells {
	margin-top: 0px;
}

.weui-cell {
	padding: 14px 14px;
}

.weui-tabbar {
	position: fixed !important;
	display: flex;
	z-index: 500;
	bottom: 0;
	width: 100%;
	background-color: #f7f7fa;
}

.pay {
	line-height: 2.5rem;
	font-size: 0.8rem;
	color: #ffffff;
}

.needPay {
	line-height: 2.5rem;
	font-size: 0.8rem;
	color: gray;
}

.weui-cell:before {
	left: 0;
}

.msginput {
	border: none;
	height: 30px;
	font-size: 16px;
	width: auto;
	text-align: right;
	color: #0080cf;
}
/* ======================按钮样式======================= */
.iosCheck input {
	display: none;
}

.iosCheck i {
	display: inline-block;
	cursor: pointer;
	padding-right: 25px;
	transition: all ease 0.2s;
	-webkit-transition: all ease 0.2s;
	border-radius: 25px;
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}

.iosCheck i:before {
	display: block;
	content: '';
	width: 25px;
	height: 25px;
	border-radius: 25px;
	background: white;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.iosCheck :checked+i {
	padding-right: 0;
	padding-left: 25px;
	background: #FE8217;
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px
		#FE8217;
}

.weCheck input {
	display: none;
}

.weCheck i {
	display: inline-block;
	cursor: pointer;
	padding: 0.2rem;
	transition: all ease 0.2s;
	-webkit-transition: all ease 0.2s;
	border-radius: 50%;
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}

.weCheck i:before {
	display: block;
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: white;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.weCheck :checked+i {
	padding-right: 0;
	padding: 0.2rem;
	background: #FE8217;
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 40px
		#FE8217;
}

/* ---------------遮罩层 ------------------*/
#cover{
position:fixed;
z-index:1000;
top:0px;
left:0px;
display:none;
width:100%;
height:100%;
opacity:0.5;
background:#000;
}
 /* --------------6位支付密码样式------------------- */
 .paycontainer{
        margin-left:30px;
        height:50px;
        position: relative;
    }
    .paypasswordcontainer{
        width: 300px;
        height: 46px;
        font-size: 12px;
        position: absolute;
        color: #ffffff;
        z-index:9;
        opacity:0.2;
        -webkit-user-select: initial; /*取消禁用选择页面元素*/
        background-color: #ffffff;
        outline:none;
    }
    .sixpassword{
        width: 300px;
        height: 22px;
        position: absolute;
        top:1px;
        left:1px;
        padding:13px 0;
        cursor: text;
        background: #fff;
        border-radius: 5px;
    }
    .sixpassword i{
        display: inline-block;
        width: 49px;
        height: 22px;
        border-left: 1px solid #cccccc;
        float: left;
    }
    .sixpassword i:first-child{
        border-left:0;
    }
    .sixpassword i.active{
        background: url("https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif") no-repeat 60% center;
    }
    .sixpassword b{
        width: 7px;
        height: 7px;
        background-color: #000;
        display: block;
        margin: 7px auto;
        display: none;
        border-radius: 50%;
    }
    .guangbiao{
        width: 48px;
        height: 46px;
        display: block;
        position: absolute;
        display: block;
        left: 0px;
        top: 0px;
        border: 1px solid #00ffff;
        border-radius: 5px;
        box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) ;
    }

/* ----------------------------------- */
</style>

<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>

<div class="goback" data-back-href="<c:url value='/wechat/acc/myWealth/myWealth'/>"></div>

<input type="hidden" class="allbalance" value="${useBalance}" />
<input type="hidden" class="allGolgBean" value="${usegolden}" />
<input type="hidden" class="allmoney" value="5" /><!--总花费  -->
<input type="hidden" class="exchangeRate" value="${exchangeRate}" /><!-- 金豆 金钱 比例(100:1) -->
<input type="hidden" id="openId" value="${customer.openId}" />
<input type="hidden" id="goodsId" value="1" />
<input type="hidden" id="tradeNo"  />




<div class="withdrawmoney">
	<div class="weui-cell">
		<div class="weui-cell__bd">
			<p>订单编号：187171678231131</p>
		</div>
		<div class="weui-cell__ft"></div>
	</div>
	<div class="weui-cell">
		<div class="weui-cell__bd">
			<p>
				应付总额： <span class="">5</span>
			</p>
		</div>
		<div class="weui-cell__ft"></div>
	</div>
</div>
<div class="weui-cell"
	style="height: 1.2rem; background-color: #ebebeb;">
	<div class="weui-cell__bd">
		<p>支付方式</p>
	</div>
</div>
<div class="weui-cell">
	<div class="weui-cell__bd">
		<p>
			金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;豆： 
			<span class="">${usegolden}</span>&nbsp;金豆
		</p>
	</div>
	<div class="weui-cell__ft"style="display: -webkit-flex; align-items: center;">
		抵用<span style="color: #FE8217;" class="GolgBeanUser"></span>金豆&nbsp;&nbsp; 
		<label class="iosCheck"><input type="checkbox" id="userGoldBean" onclick="changeRealPay()"><i></i></label>
	</div>
</div>
<div class="weui-cell">
	<div class="weui-cell__bd">
		<p>
			余&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额： 
			<span class="">${useBalance}</span>&nbsp;元
		</p>
	</div>
	<div class="weui-cell__ft" style="">
		抵用<span style="color: #FE8217" class="BalanceUser"></span>元&nbsp;&nbsp;
		<label class="iosCheck"><input type="checkbox" id="userBalance" onclick="changeRealPay()"><i></i></label>
	</div>
</div>
<div class="weui-cell weui-cell_access" onclick="coupons()">
	<div class="weui-cell__bd">
		<p>优惠卷</p>
	</div>
	<div class="weui-cell__ft">
		<p></p>
	</div>
</div>

<div class="weui-cell" style="border: 1px solid #ebebeb">
	<div class="weui-cell__hd">
		<img src="<c:url value='/images/we/myWealth/weixin1.png'/>">
	</div>
	<div class="weui-cell__bd"
		style="padding-left: 0.5rem; line-height: 1.2rem">
		<p>微信支付</p>
		<p style="color: gray; font-size: 12px">需要安装微信客户端</p>
	</div>
	<label class="weCheck"><input type="checkbox" id="userWeChart"><i></i></label>
</div>

<div class="weui-tabbar">
	<a href="#" class="weui-tabbar__item" style="flex-grow: 1;">
		<p class="needPay">
			需支付：
			<span style="color: red;">￥</span>
			<span class="realPay" style="color: red; font-size: 20px">
			
			</span>
		</p>
	</a> 
	<a href="#" class="weui-tabbar__item" style="flex-grow: 1; background-color: #EA5E17;" onclick="payment()">
		<p class="pay">立即支付<p>	    
	</a>
</div>

<!--==================== 输入密码模态框==================================== -->
<div id="myModal" hidden style="background-color:#ffffff;opacity:1 !important;position:relative;z-index:2000;margin-top:-60%;height:180px;">

            <div class="header" style="border-bottom:1px solid #e5e5e5;height:50px;">
                <button type="button" id="close" style="line-height:50px;float:right;width:40px;height:40px;border:none;background-color:white;font-size:20px;color:#b1a5a5">x</button>
                <span style="line-height:50px;font-size:20px;padding-left:10px">请输入支付密码</span>
            </div>
            
  <div class="body" style="padding:15px 10px 0 10px;height:70px">          
    <div class="paycontainer">
        <input type="tel" autofocus="autofocus" id="password" minlength="6" maxlength="6" class="paypasswordcontainer "
               oncontextmenu="return false" onpaste="return false" oncopy="return false"  
               oncut="return false" autocomplete="off">
        <div class="sixpassword">
            <i class="active"><b></b></i>
            <i><b></b></i>
            <i><b></b></i>
            <i><b></b></i>
            <i><b></b></i>
            <i><b></b></i>
            <span class="guangbiao"></span>
        </div>
    </div>
</div>
      <div class="footer" style="height:50px;padding-top:5px">
           <a href="<c:url value='/wechat/cust/customerIden/retrievePassword'/>" style="font-size:20px;float:right;padding-right:20px;padding-bottom:0px;color:#00ace2">忘记密码</a>
           <!-- <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
           <button type="button" class="btn btn-primary" id="confirmPassword">确认</button> -->
      </div>

</div>
<div hidden id="cover"></div>

<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>

<script type="text/javascript">
	
	var allmoney = parseFloat($(".allmoney").val());
	var allbalance = parseFloat($(".allbalance").val());
	var allGolgBean = parseInt($(".allGolgBean").val());
	var exchangeRate = parseInt($(".exchangeRate").val());

	var BalanceUser = parseFloat(0);
	var GolgBeanUser = parseFloat(0);
	var realPay = parseFloat(allmoney);
	
	
	//点击支付
	function payment() {
		if(realPay>0){
			$("#userWeChart").prop("checked",true);
			buildOrder();		
		}else{
			$("#userWeChart").prop("checked",false);
			$("#myModal").show();
		}	
	}

	$(function() {

		changeUser();
			
	})
	
	//点击抵用按钮
	function changeRealPay() {
		realPay = parseFloat(allmoney);
				
		if($("#userBalance").is(':checked')&&(!$("#userGoldBean").is(':checked'))){
			if (allbalance > 0) {
				if (allbalance < allmoney) {
					BalanceUser = allbalance;
				} else if (allbalance > allmoney) {
					BalanceUser = allmoney;
				}
				realPay = realPay - BalanceUser;
				$(".BalanceUser").html(BalanceUser);
				$(".GolgBeanUser").html(0);
			}
		}else{
			changeUser();
			if($("#userGoldBean").is(':checked')){
				realPay = (realPay*100 - GolgBeanUser / exchangeRate*100)/100;
			}if($("#userBalance").is(':checked')){
				realPay = (realPay*100 - BalanceUser*100)/100;
			}
			
		}
		
		$(".realPay").html(realPay);
		if(realPay>0){
			$("#userWeChart").prop("checked",true);
		}else{
			$("#userWeChart").prop("checked",false);
		}
		
	}
	
	//检测密码是否正确
	function confirmPass() {
		var password=$("#password").val();
		//把密码传入controller得到返回结果
		var url = $.getVirtualPath()+"/wechat/acc/myWealth/toConfirmPassword";
		var result=$.getTextPost(url,"password="+password);
		/* alert(result); */
		if(result == "true"){
			//密码匹配正确 执行提现操作
			buildOrder();
		}else if(result == "false"){
			$.toast("<p>密码错误</p><p>请重新输入</p>","text");
		}
	};
	//点击x 隐藏输入框和遮罩层
	$("#close").on("click",function(){
		$("#cover").hide();
		$("#myModal").hide();	

	})
	/* --------------6位密码支付的js-------------------- */
	 $(function(){
	        $(".paypasswordcontainer").keyup(function(){
	           $input_val=$(this).val(); 
	            $input=$input_val.length;
	            if($input==6){
	               //检测密码是否正确
	            	confirmPass();

	           	   $("#cover").hide(); 
	    		   $("#myModal").hide(); 
	               //初始化密码的值与长度
	    		   $input=0;
	               $(this).val("");
	            }
	            checkPassword();
	        })

	    });
	
	//根据输入密码显示密码的样式
	    function checkPassword(){
		if ($input == 0) {
            $(".sixpassword").find("i").eq(0).addClass("active").siblings("i").removeClass("active");
            $(".sixpassword").find("b").css({"display": "none"});
            $(".guangbiao").css({"left": 0});
        }
        else if ($input == 6) {
            $(".sixpassword").find("b").css({"display": "block"});
            $(".sixpassword").find("i").eq(5).addClass("active").siblings("i").removeClass("active");
            $(".guangbiao").css({"left": 5 * 50});
        }else{
            $(".sixpassword").find("i").eq($input).addClass("active").siblings("i").removeClass("active");
            $(".sixpassword").find("i").eq($input).prevAll("i").find("b").css({"display":"block"});
            $(".sixpassword").find("i").eq($input).nextAll("i").find("b").css({"display":"none"});
            $(".guangbiao").css("left",$input*50);
        }
	}
	
	
	
	
		//创建订单
		function buildOrder(){
			var golgBean=0,balance=0,realPay=0;
			if($("#userGoldBean").is(':checked')){
				golgBean = parseFloat($(".GolgBeanUser").html())/exchangeRate;
				$(".GolgBeanUser").html(GolgBeanUser);
			}if($("#userBalance").is(':checked')){
				balance = $(".BalanceUser").html();
			}
			realPay = $(".realPay").html();
			
			var goodsId=$("#goodsId").val();
			var url=$.getVirtualPath()+"/wechat/acc/pay/payInfo?openId="+$("#openId").val()+"&golgBean="+golgBean+"&balance="+balance+"&realPay="+realPay;
			var data=[{"goodsId":goodsId, "counts":1}];
			$.ajax({
				url:url,
				type:'post',
				dataType:'json',
				contentType:'application/json',
				data:JSON.stringify(data),
				success:function(resInfo){
						$("#tradeNo").val(resInfo.payInfo.tradeNo);
						if(resInfo.payInfo!=null){
							console.log("hahahahahhahah-=====");
							startPay(resInfo.payInfo,payCallback);		
						}
									
				},
				error:function(res){
						$.toptip(res.responseText,"error");
				}
			});
		}
		
		function startPay(res,payCallback){
			if($.isNull(res)){
				$.alert("支付信息不能为空");
				return;
			}
			if($.isNull(payCallback)){
				$.alert("回调信息不能为空");
				return;
			}
			
			var config={
			           "appId":res.appId,     //公众号名称，由商户传入     
			           "timeStamp":""+res.timeStamp,         //时间戳，自1970年以来的秒数     
			           "nonceStr":res.nonceStr, //随机串     
			           "package":res.package,     
			           "signType":res.signType,         //微信签名方式：     
			           "paySign":res.paySign //微信签名 
			       };
			
			WeixinJSBridge.invoke('getBrandWCPayRequest', config,payCallback); 
		}

		function payCallback(res){
			if(res.err_msg == "get_brand_wcpay_request:ok") {
	     	   	$.toast("支付成功");
	     		
	     	  /* 	var formData=$("#joinEntrepreneur").serialize();
				var url=$.getVirtualPath()+"/wechat/cust/customerIden/updateLevel";
		 	   	var result=$.getTextPost(url,formData);
		 	   	 */
		 	 /*   	if(result=="true"){
		 		   	setTimeout(function(){
		 			
		 		   	window.location.href=$.getVirtualPath()+"/wechat/acti/choujiang?actiId=d25c15ef-f24c-4b0d-a931-572ff76b9a2c";
		 		   	},100);
		 	   	} */
	        }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
	     	   	$.toast("支付取消","cancel");
	        }else if(res.err_msg == "get_brand_wcpay_request:fail"){
	     	   	$.toast("支付失败", "forbidden");
	        }  
		}
		//初始化抵用钱数
		function changeUser() {
			if (allGolgBean > 0) {
				if (allGolgBean / exchangeRate < allmoney) {
					GolgBeanUser = allGolgBean;
					if (allbalance > 0) {
						if (allbalance < (allmoney - allGolgBean / exchangeRate)) {
							BalanceUser = allbalance;
						} else if (allbalance >= (allmoney - allGolgBean/ exchangeRate)) {
							BalanceUser = (allmoney*100 - allGolgBean / exchangeRate*100)/100;
						}
					}
				} else if (allGolgBean / exchangeRate >= allmoney) {
					GolgBeanUser = allmoney * 100;
				}
			} else {
				if (allbalance > 0) {
					if (allbalance < allmoney) {
						BalanceUser = allbalance;
					} else if (allbalance > allmoney) {
						BalanceUser = allmoney;
					}
				}
			}
			$(".BalanceUser").html(BalanceUser);
			$(".GolgBeanUser").html(GolgBeanUser);
			$(".realPay").html(realPay);
			if(realPay>0){
				$("#userWeChart").prop("checked",true);
			}
		}
		
		function coupons() {
			$.toast("您没有任何优惠卷哦！", "text");
		}
	
</script>